import React, { useContext, useState } from 'react';
import styles from './index.module.scss';

import { Card, Button, ResponsiveGrid, Tag, Checkbox } from '@alifd/next';
import CustomIcon from '@/components/CustomIcon';
import { Link } from 'ice';

import { formlizeKilo } from '@/utils/formlize';

import handleFn from '../handle';

const { Cell } = ResponsiveGrid;
const { Group: TagGroup } = Tag;

// 状态显示组件
const Stats = ( { type, status } ) => {
    const arr = Object.values(status);
    if( type == 'bps' ) {
        let tx = 0,
            rx = 0;
        arr.forEach( item => {
            rx += Number(item.rx_bps);
            tx += Number(item.tx_bps);
        });
        // 格式处理
        rx = formlizeKilo(rx*8);
        tx = formlizeKilo(tx*8);
        return (
            <>
                <span className={styles['card-content-value-stats-left']}>
                    RX: {rx}
                </span>
                <span className={styles['card-content-value-stats-right']}>
                    TX: {tx}
                </span>
            </>
        );
    } else if( type == 'pps' ) {
        let tx = 0,
            rx = 0;
        arr.forEach( item => {
            rx += item.rx_pps;
            tx += item.tx_pps;
        });
        // 格式处理
        rx = rx.toFixed(1) + '';
        tx = tx.toFixed(1) + '';
        return (
            <>
                <span className={styles['card-content-value-stats-left']}>
                    RX: {rx}
                </span>
                <span className={styles['card-content-value-stats-right']}>
                    TX: {tx}
                </span>
            </>
        );
    } else {
        return (
            <span>
                N/A
            </span>
        );
    }
}

const CardsView = ({rowData, onSel} ) => {
    let dataSource = rowData;

    let [ selectionKeys, onSelectionKeys ] = useState([]);

  return (
    <ResponsiveGrid gap={10} className={styles['card-view']}>
      {
          dataSource.map((item,i) => {
            return (
                <Cell key={i} colSpan={4}>
                    <Card free className={styles['display-card']}>
                        <Card.Header 
                          className={styles['card-header']}
                          title={<h1 className={styles['card-header-button']}><Link to={`/devices/deviceinfo/${item._id}`}>{item.name || 'Unknown'}</Link></h1>} 
                          subTitle={
                            <TagGroup>
                                <Tag size="small" type="normal" color={item.isApproved ? 'green' : 'red'}>
                                    {item.isApproved ? 'Approved' : 'Not Approved'}
                                </Tag>
                                <Tag size="small" type="normal" color={item.isConnected ? 'green' : 'red'}>
                                    {item.isConnected ? 'Connected' : 'Not Connected'}
                                </Tag>
                                {item.sync.state == 'synced' ? <Tag size="small" type="normal" color={item.sync.state == 'synced' ? 'green' : ''}>
                                    {item.sync.state == 'synced' ? 'Synced' : ''}
                                </Tag> : ''}
                            </TagGroup>
                          }
                          extra={
                              <div style={{marginTop:'30px'}}>
                                  <Checkbox onChange={checked => {
                                      if(checked) {
                                        selectionKeys.push(item._id)
                                      } else {
                                        selectionKeys.splice(selectionKeys.indexOf(item._id),1)
                                      }
                                      onSelectionKeys([...selectionKeys])
                                      onSel(selectionKeys)
                                  }}/>
                              </div>   
                          } 
                        />
                        <Card.Divider />
                        <Card.Content className={styles['card-content']}>
                            <ul>
                                <li>
                                    <span className={styles['card-content-key']}>vRouter: </span>
                                    <span className={styles['card-content-value']}>{Object.keys(item.deviceStatus).length == 0 ? 'Pending' : 'Resolve'}</span>
                                </li>
                                <li>
                                    <span className={styles['card-content-key']}>Hostname: </span>
                                    <span className={styles['card-content-value']}>{item.hostname}</span>
                                </li>
                                <li>
                                    <span className={styles['card-content-key']}>WAN IPs: </span>
                                    <span className={styles['card-content-value']}>{item.interfaces[1].IPv4}</span>
                                </li>
                                <li>
                                    <span className={styles['card-content-key']}>ID: </span>
                                    <span className={styles['card-content-value']}>{item.machineId}</span>
                                </li>
                                <li>
                                    <span className={styles['card-content-key']}>PPS: </span>
                                    <span className={styles['card-content-value']}>{
                                        !!item.deviceStatus.ifStats ? <Stats type="pps" status={item.deviceStatus.ifStats} /> : 'N/A'
                                    }</span>
                                </li>
                                <li>
                                    <span className={styles['card-content-key']}>BPS: </span>
                                    <span className={styles['card-content-value']}>{
                                        !!item.deviceStatus.ifStats ? <Stats type="bps" status={item.deviceStatus.ifStats} /> : 'N/A'
                                    }</span>
                                </li>
                            </ul>
                        </Card.Content>
                        <Card.Divider />
                        <Card.Actions>
                            <Button disabled={!item.isConnected || item.deviceStatus.state == 'running'}
                            onClick={() => handleFn['START'](item._id)} className="round-button" type="secondary">
                                <CustomIcon type="iconplay-circle"/>
                            </Button>
                            <Button onClick={() => handleFn['STOP'](item._id)} disabled={!item.isConnected || item.deviceStatus.state == 'stopped'} className="round-button" type="primary" warning>
                                <CustomIcon type="iconborder"/>
                            </Button>
                            <Button onClick={() => handleFn['UPDATE'](item._id)} className="round-button" type="primary">
                                <CustomIcon type="iconsync"/>
                            </Button>
                            <Button onClick={() => handleFn['DELETE'](item._id)} className="round-button" type="primary" warning>
                                <CustomIcon type="icondelete"/>
                            </Button>
                        </Card.Actions>
                    </Card>
                </Cell>
            )
          })
      }
    </ResponsiveGrid>
  );
}

export default CardsView;